<template>
  <div class="main-content">
    <h1 style="margin: 5px 0">经纪人业绩排名表</h1>
    <div class="screen-frame clearfix"
         style="min-width: 1050px;">
      <div class="row">
        <div class="col-lg-3 col-md-3">
          <div class="form-horizontal">
            <div class="form-group">
              <label class="col-md-4 col-sm-2 control-label label-title">楼盘名称：</label>
              <div class="col-md-4 col-sm-5 col-input">
                <el-select class=""
                           v-model="params.premisesId"
                           filterable
                           placeholder="请选择"
                           :clearable="true"
                           style="width:200px;">
                  <el-option v-for="item in findPremisesList"
                             :key="item.premisesId"
                             :label="item.premisesName"
                             :value="item.premisesId">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-md-6">
          <div class="form-horizontal">
            <div class="form-group">
              <label class="col-lg-2 col-md-2 col-sm-2 control-label label-title">时间：</label>
              <div class="col-lg-5 col-md-5 col-sm-5 col-input">
                <DatePicker type="date"
                            placeholder="开始日期"
                            v-model="params.beginDate"
                            style="width: 200px"></DatePicker>
              </div>
              <div class="col-lg-4 col-md-4 col-sm-4 col-input"
                   style="margin-left: 20px; text-align: center;">
                <DatePicker type="date"
                            placeholder="结束日期"
                            v-model="params.endDate"
                            style="width: 200px"></DatePicker>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-3 col-md-3">
          <div class="form-horizontal">
            <div class="form-group">
              <label class="col-lg-4 col-md-5 col-sm-4 control-label label-title">合作机构：</label>
              <div class="col-lg-4 col-md-6 col-sm-4 col-input">
                <Select v-model="params.orgId"
                        clearable
                        filterable
                        @on-change="findStoreList"
                        style="width:200px">
                  <Option v-for="item in orgList"
                          v-model="item.agentCompany">{{ item.agentCompanyName }}</Option>
                </Select>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-3">
          <div class="form-horizontal">
            <div class="form-group">
              <label class="col-lg-4 col-md-4 col-sm-4 control-label label-title">门店名：</label>
              <div class="col-lg-4 col-md-6 col-sm-4 col-input">
                <Select v-model="storeId"
                        clearable
                        filterable
                        @on-change="findGroupList"
                        style="width:200px">
                  <Option v-for="item in storeList"
                          v-model="item.id">{{ item.departmentName }}</Option>
                </Select>
              </div>

            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-3">
          <div class="form-horizontal">
            <div class="form-group">
              <label class="col-lg-4 col-md-4 col-sm-4 control-label label-title">组别名：</label>
              <div class="col-lg-4 col-md-4 col-sm-4 col-input">
                <Select v-model="groupId"
                        clearable
                        filterable
                        @on-change="findReportList"
                        style="width:200px">
                  <Option v-for="item in groupList"
                          v-model="item.id">{{ item.departmentName }}</Option>
                </Select>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-3">
          <div class="form-group">
            <label class="col-lg-3 col-md-3 col-sm-3 control-label"></label>
            <div class="col-lg-6 col-md-6 col-sm-6 col-input">
              <button type="button"
                      class="btn btn-theme"
                      v-on:click="list(1)">查询</button>
              <button type="button"
                      class="btn btn-theme"
                      v-if="exportBtnShow"
                      v-on:click="exportInfo"
                      v-res="{code:'menu_0007_0007_0001'}">导出</button>
              <button type="button"
                      class="btn btn-theme"
                      style="background-color: #999;"
                      v-if="!exportBtnShow"
                      v-on:click="exportRepeatMsg"
                      v-res="{code:'menu_0007_0007_0001'}">导出 {{ timeOut }}</button>
            </div>
          </div>
        </div>
      </div>
      <div class="row"
           style="text-align: center">
        <div class="col-lg-3 col-md-3">
          <div class="form-horizontal">
            <div class="form-group">
              <Checkbox v-model="underOrg">显示机构直属经纪人</Checkbox>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-3">
          <div class="form-horizontal">
            <div class="form-group">
              <Checkbox v-model="underStore">显示门店直属经纪人</Checkbox>

            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-3">
          <div class="form-horizontal">
            <div class="form-group">
              <Checkbox v-model="underGroup">显示组别直属经纪人</Checkbox>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-3">
          <div class="form-group">

          </div>
        </div>
      </div>

      <!--div class="col-lg-6">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-3 col-sm-2 control-label" style="padding-right: 0;width: 15%;">楼盘状态：</label>
                        <div class="row" style="text-align: left; line-height: 30px;">
                            <div class="col-lg-2 col-md-2" v-for="(row, index) in premisesStatusEnum">
                                <Checkbox v-model="row.saleStatusFlag">{{ row.saleStatusName }}</Checkbox>
                            </div>
                        </div>
                    </div>
                </div>
            </div-->
      <div class="col-lg-6">
        <div class="form-horizontal">
          <div class="form-group">
            <label class="col-md-3 col-sm-2 control-label"
                   style="padding-right: 0;width: 17%;">有效数据：</label>
            <div class="row"
                 style="text-align: left; line-height: 30px;">
              <div class="col-lg-4 col-md-2">
                <Checkbox v-model="showValidDataFlag">过滤无业绩统计</Checkbox>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="row"
         style="text-align: center;color: #f87242;"
         v-show="!show">
      没有查询到相应的数据
    </div>
    <div class="table table-striped table-bordered"
         v-show="show">

      <div class="table-responsive">
        <table class="table table-striped table-bordered min-width-790">
          <thead>
            <tr>
              <th width="5%">排名</th>
              <th width="15%">经纪人名</th>
              <th width="10%">报备客户</th>
              <th width="10%">报备成功客户</th>
              <th width="10%">到访客户</th>
              <th width="10%">认筹客户</th>
              <th width="10%">认购客户</th>
              <th width="10%">签约客户</th>
              <th width="10%">签约率</th>
              <th width="10%">签约业绩</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row,index) in effectList">
              <td>{{index + 1}}</td>
              <td>{{row.name}}</td>
              <td>{{row.countOne}}</td>
              <td>{{row.countTwo}}</td>
              <td>{{row.countThree}}</td>
              <td>{{row.countFour}}</td>
              <td>{{row.countFive}}</td>
              <td>{{row.countSix}}</td>
              <td>{{utils.calculateSignRate(row.countTwo,row.countSix)}}</td>
              <td>{{row.dealAmount}}</td>
            </tr>
            <tr class="result-total">
              <td colspan="2">合计</td>
              <td>{{resultTotal.countOne}}</td>
              <td>{{resultTotal.countTwo}}</td>
              <td>{{resultTotal.countThree}}</td>
              <td>{{resultTotal.countFour}}</td>
              <td>{{resultTotal.countFive}}</td>
              <td>{{resultTotal.countSix}}</td>
              <td></td>
              <td>{{resultTotal.dealAmount}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div id="laypage_effect_report"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      params: {
        pageNo: 1,
        pageSize: 10,
        premisesId: "",
        beginDate: this.utils.getCurrentMonthFirst(),
        endDate: this.utils.getCurrentMonthLast(),
        storeName: "",
        userId: window.localStorage.getItem("userId"),
        orgId: "",
        saleStatus: "0,1,2,3",
        validateData: true,
      },
      effectList: [],
      findPremisesList: [],
      orgList: [],
      storeList: [],
      groupList: [],
      storeId: "",
      groupId: "",
      show: false,
      underOrg: true,
      underStore: true,
      underGroup: true,
      initFlag: true,
      source: "native",
      routeParams: {},
      premisesStatusEnum: [
        { saleStatus: 0, saleStatusName: "待售", saleStatusFlag: false },
        { saleStatus: 1, saleStatusName: "在售", saleStatusFlag: true },
        { saleStatus: 2, saleStatusName: "售罄", saleStatusFlag: false },
        { saleStatus: 3, saleStatusName: "下架", saleStatusFlag: false },
      ],
      showValidDataFlag: true,
      resultTotal: {
        countOne: 0,
        countTwo: 0,
        countThree: 0,
        countFour: 0,
        countFive: 0,
        countSix: 0,
        dealAmount: 0,
      },
      exportBtnShow: true,
      timeOut: 10,
    };
  },
  mounted: function () {
    var _self = this;
    //加载时间与楼盘
    // this.params.premisesId = this.$route.params.premisesId;
    // this.list();
    //参数加载
    let routeParams = this.$route.params;
    if (routeParams) {
      if (routeParams.beginDate) {
        _self.params.beginDate = routeParams.beginDate;
      }
      if (routeParams.endDate) {
        _self.params.endDate = routeParams.endDate;
      }
      if (routeParams.source) {
        _self.source = routeParams.source;
      }
      _self.routeParams = routeParams;
    }
    this.findPremisesLists();
    this.findOrgList();
  },
  methods: {
    list: function (pageNo) {
      var loadIndex = layer.load();
      var _self = this;
      if (pageNo) {
        this.params.pageNo = 1;
      }
      var body = {};
      body.params = {
        pageNo: this.params.pageNo,
        pageSize: this.params.pageSize,
        beginDate: this.utils.dateFormat(_self.params.beginDate, "yyyy-MM-dd"),
        endDate: this.utils.dateFormat(_self.params.endDate, "yyyy-MM-dd"),
        storeId: _self.storeId,
        orgId: _self.params.orgId,
        groupId: _self.groupId,
        underOrg: _self.underOrg,
        underStore: _self.underStore,
        underGroup: _self.underGroup,
        premisesId: _self.params.premisesId,
        saleStatus: _self.params.psaleStatus,
        validateData: _self.showValidDataFlag,
      };

      var url = this.utilHelper.apiUrl + "/api/getAgentReport";
      _self.$http.post(url, body).then((response) => {
        layer.close(loadIndex);
        var body = response.body.resData;
        if (body.result == 0) {
          layer.msg("接口异常!");
        } else {
          _self.effectList = body.pageModel.rows;
          _self.setResultTotal();
          var totalPages = body.pageModel.totalPages;
          var current = body.pageModel.pageNumber;
          var total = body.pageModel.total;
          _self.show = total > 0 ? true : false;
          // if(totalPages > 0) {
          layui.laypage.render({
            elem: $("#laypage_effect_report"), //容器。值支持id名、原生dom对象，jquery对象,
            limit: _self.params.pageSize,
            curr: current,
            count: total,
            theme: "#f87242;", //皮肤
            first: "首页", //若不显示，设置false即可
            last: "尾页", //若不显示，设置false即可
            prev: "上一页", //若不显示，设置false即可
            next: "下一页", //若不显示，设置false即可
            limits: [10, 20, 50, 100, 200],
            layout: ["prev", "page", "next", "skip", "count", "limit"],
            jump: function (obj, first) {
              console.log(obj);
              if (!first) {
                _self.params.pageNo = obj.curr;
                _self.params.pageSize = obj.limit;
                _self.list();
              }
            },
          });
        }
        // }
      });
    },
    findPremisesLists: function () {
      var _self = this;
      var url = this.utilHelper.apiUrl + "/api/getCaseMemberList";
      var body = {};
      body.params = {
        userId: window.localStorage.getItem("userId"),
      };
      _self.$http.post(url, body).then((response) => {
        _self.findPremisesList = response.body.resData.caseMemberList;
        if (_self.$route.params.premisesId) {
          _self.params.premisesId = _self.$route.params.premisesId;
        }
      });
    },
    findOrgList: function () {
      //getAgentOrgByDevOrg
      var _self = this;
      var url = this.utilHelper.apiUrl + "/api/getAgentOrgByDevOrg";
      var body = {};
      body.params = {
        userId: window.localStorage.getItem("userId"),
      };
      _self.$http.post(url, body).then((response) => {
        _self.orgList = response.body.resData.agentOrgList;
        if (_self.orgList.length > 0) {
          if (!_self.params.orgId && _self.source == "native") {
            _self.params.orgId = _self.orgList[0].agentCompany;
          }
        } else {
          _self.storeId = "";
          _self.groupId = "";
          _self.storeList = [];
          _self.groupList = [];
        }
        if (_self.source != "native" && _self.initFlag) {
          _self.params.orgId = this.$route.params.orgId;
        }
        _self.findStoreList();
      });
    },
    findStoreList: function (orgId) {
      var _self = this;
      var url = this.utilHelper.apiUrl + "/api/getStoreByOrg";
      var body = {};
      body.params = {
        userId: window.localStorage.getItem("userId"),
        merchantId: _self.params.orgId,
      };
      _self.$http.post(url, body).then((response) => {
        _self.storeList = response.body.resData.list;
        if (_self.storeList.length > 0) {
          // if(!_self.params.storeId && (_self.source == 'native' || !_self.initFlag)){
          if (_self.source == "native" || !_self.initFlag) {
            _self.storeId = _self.storeList[0].id;
          }
        } else {
          _self.storeId = "";
          _self.storeList = [];
        }
        if (
          (_self.source == "store" || _self.source == "group") &&
          _self.initFlag
        ) {
          _self.storeId = _self.routeParams.storeId;
        }
        _self.findGroupList();
      });
    },
    findGroupList: function (storeId) {
      var _self = this;
      var url = this.utilHelper.apiUrl + "/api/getStoreByOrg";
      var body = {};
      body.params = {
        userId: window.localStorage.getItem("userId"),
        parentId: _self.storeId,
      };
      _self.$http.post(url, body).then((response) => {
        _self.groupList = response.body.resData.list;
        if (_self.groupList.length > 0) {
          // if(!_self.groupId && (_self.source == 'native' || !_self.initFlag)){
          if (_self.source == "native" || !_self.initFlag) {
            _self.groupId = _self.groupList[0].id;
          }
          if (_self.source == "group" && _self.initFlag) {
            _self.groupId = _self.routeParams.groupId;
          }
        } else {
          _self.groupId = "";
          _self.groupList = [];
        }
        //异步回调，防止第一次加载之后就一致调用
        if (_self.initFlag) {
          _self.list();
        }
        _self.initFlag = false;
      });
    },
    findReportList: function () {
      var _self = this;
      _self.params.pageNo = 1;
      if (_self.initFlag) {
        _self.list();
      }
    },
    exportInfo: function () {
      var _self = this;
      _self.exportBtnShow = false;
      var userId = window.localStorage.getItem("1_userId");
      var beginDate = _self.utils.dateFormat(
        _self.params.beginDate,
        "yyyy-MM-dd"
      );
      var endDate = _self.utils.dateFormat(_self.params.endDate, "yyyy-MM-dd");
      var storeId = _self.storeId ? _self.storeId : "";
      var storeName = _self.storeName ? _self.storeName : "";
      var groupId = _self.groupId;
      var premisesId = "";
      if (_self.params.premisesId) {
        premisesId = _self.params.premisesId;
      }
      var validateData = _self.showValidDataFlag;
      let companyUuid = _self.getQueryString("companyUuid");

      var url =
        _self.utilHelper.apiUrl +
        "/api/getAgentReportExport?params.userId=" +
        userId +
        "&params.beginDate=" +
        beginDate +
        "&params.endDate=" +
        endDate +
        "&params.premisesId=" +
        premisesId +
        "&params.pageNo=1&params.loginType=1&params.pageSize=9999999" +
        "&params.validateData=" +
        validateData +
        "&params.orgId=" +
        this.params.orgId +
        "&params.storeId=" +
        storeId +
        "&params.groupId=" +
        groupId +
        "&params.underOrg=" +
        _self.underOrg +
        "&params.underStore=" +
        _self.underStore +
        "&params.underGroup=" +
        _self.underGroup +
        "&params.companyUuid=" +
        companyUuid;
      location.href = url;

      var exportInterval = setInterval(function () {
        if (_self.timeOut <= 0) {
          window.clearInterval(exportInterval);
          _self.timeOut = 10;
          _self.exportBtnShow = true;
        } else {
          _self.timeOut -= 1;
        }
      }, 1000);
    },
    exportRepeatMsg: function () {
      var _self = this;
      layer.msg(_self.timeOut + "秒后可再次导出,请稍等片刻!");
      return;
    },
    setResultTotal() {
      var _self = this;
      _self.resultTotal = {
        countOne: 0,
        countTwo: 0,
        countThree: 0,
        countFour: 0,
        countFive: 0,
        countSix: 0,
        dealAmount: 0,
      };
      for (var i in _self.effectList) {
        _self.resultTotal.countOne =
          Number(_self.resultTotal.countOne) +
          Number(_self.effectList[i].countOne);
        _self.resultTotal.countTwo =
          Number(_self.resultTotal.countTwo) +
          Number(_self.effectList[i].countTwo);
        _self.resultTotal.countThree =
          Number(_self.resultTotal.countThree) +
          Number(_self.effectList[i].countThree);
        _self.resultTotal.countFour =
          Number(_self.resultTotal.countFour) +
          Number(_self.effectList[i].countFour);
        _self.resultTotal.countFive =
          Number(_self.resultTotal.countFive) +
          Number(_self.effectList[i].countFive);
        _self.resultTotal.countSix =
          Number(_self.resultTotal.countSix) +
          Number(_self.effectList[i].countSix);
        _self.resultTotal.dealAmount =
          Number(_self.resultTotal.dealAmount) +
          Number(_self.effectList[i].dealAmount);
      }
    },
    getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);

      if (r != null) {
        return unescape(r[2]);
      }
      return null;
    },
  },
};
</script>

<style scoped>
.label-title {
  padding-left: 0px;
  padding-right: 0px;
}
.col-input {
  padding-left: 0px;
  padding-right: 0px;
  margin-left: 5px;
  margin-right: 5px;
}
</style>